<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Column, Config } from '@/components/ConfigForm'
import { Check, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import { Hide, View } from '@element-plus/icons-vue'
import { ref, markRaw, computed } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'
/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础用法', type: 'switch' },
    {
      prop: 'demo2', label: '自定义颜色', type: 'switch',
      props: { style: { '--el-switch-on-color': '#13ce66', '--el-switch-off-color': '#ff4949' } }
    },
    { prop: 'demo3', label: '文字描述', type: 'switch', props: { activeText: "是", inactiveText: "否" } },
    { prop: 'demo4', label: '行内展示文字描述', type: 'switch', props: { inlinePrompt: true, activeText: "是", inactiveText: "否" } },
    { prop: 'demo5', label: '显示自定义图标', type: 'switch', props: { activeIcon: markRaw(Check), inactiveIcon: markRaw(Close) } },
    {
      prop: 'demo6', label: '行内显示自定义图标', type: 'switch',
      props: { inlinePrompt: true, activeIcon: markRaw(Check), inactiveIcon: markRaw(Close) }
    },
    { prop: 'demo7', label: '扩展的 value 类型', type: 'switch', props: { activeValue: 100, inactiveValue: 0 } },
    { prop: 'demo8', label: '禁用状态', value: true, type: 'switch', props: { disabled: true } },
    { prop: 'demo9', label: '加载状态', type: 'switch', props: { loading: computed(() => dataForm.value.demo9) } },
    { // 异步切换
      prop: 'demo10', label: '异步切换', type: 'switch', props: {
        loading: false,
        beforeChange: () => {
          let column = config.value.columns.find((column: Column) => column.prop === 'demo10');
          column ? column.props ? column.props.loading = true : '' : ''
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              column ? column.props ? column.props.loading = false : '' : ''
              if (Math.random() < 0.5) {
                ElMessage.success('切换成功')
                return resolve(true)
              } else {
                ElMessage.error('切换失败')
                return reject(true)
              }
            }, 500)
          })
        }
      }
    },
    { prop: 'demo11', label: '自定义动作图标', type: 'switch', props: { activeActionIcon: markRaw(View), inactiveActionIcon: markRaw(Hide) } },
    { // 自定义操作图标
      prop: 'demo12', label: '自定义操作图标', type: 'switch',
      slots: {
        'active-action': 'T',
        'inactive-action': 'F'
      }
    },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>